<template>
	<view class="main animated fadeIn faster">
		<title-bar-vue :title="title"></title-bar-vue>
		<view class="" style="width: 100%; background-color: f4f5fa;">
			<view class="list list-mt-100">
				<view class="item" @tap="chooseImage('avatar')">
					<text>头像</text>
					<view class="icon">
						<image class="avatar rounded" :src="$store.state.user.avatar" mode="aspectFill" style="width: 90rpx; height: 90rpx;"></image>
						<image src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/%E7%BB%84%202457.png"></image>
					</view>
				</view>
				<view class="item" @click="openChangeNikePopup">
					<text>昵称</text>
					<view class="icon">
						<text>{{$store.state.user.nickname}}</text>
						<image src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/%E7%BB%84%202457.png"></image>
					</view>
				</view>
				<view class="item">
					<view class="d-flex d-flex-middle">
						<text>性别</text>
						<view class="desc font22" style="color: #7d7c7d;">（注册的时候已经确定,不能修改）</view>
					</view>
					<view class="icon mr-3">
						<text>{{$store.state.user.gender === 1? '男' : '女'}}</text>
						<!-- <image src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/%E7%BB%84%202457.png"></image> -->
					</view>
				</view>
				<view class="item" @click="openDatePopup('bottom')">
					<text>生日</text>
					<view class="icon">
						<text v-if="$store.state.user.birthday">{{$store.state.user.birthday}}</text>
						<text v-else>请选择</text>
						<image src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/%E7%BB%84%202457.png"></image>
					</view>
				</view>
				<view class="item" @tap="chooseImage('background')">
					<text>背景图</text>
					<view class="icon">
						<image src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/%E7%BB%84%202457.png"></image>
					</view>
				</view>
			</view>
			<view class="list clearCache mt-2">
				<view class="item" @click="gotoChageAvatarPage">
					<text>我的挂件</text>
					<view class="icon">
						<image src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/%E7%BB%84%202457.png"></image>
					</view>
				</view>
			</view>
			<view class="list clearCache mt-2">
				<view class="item" @click="openPersonalizedSignaturePopup">
					<text>个性签名</text>
					<view class="icon">
						<text v-if="$store.state.user.signature">{{$store.state.user.signature}}</text>
						<text v-else>你还没有签名哦</text>
						<view class="pic d-flex-btn">
							<image src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/%E7%BB%84%202457.png"></image>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<uni-popup ref="DatePopup" background-color="#fff" border-radius="16px 16px 16px 16px" style="z-index: 999;">
			<view class="d-flex d-flex-between pb-6 mt-6 px-6">
				<view style="color: #9E9D9D;;" @click="ColseDatePopup">取消</view>
				<view style="color: #66CCCC;;" @click="dateconfirm">确认</view>
			</view>
			<view class="popup-content p-2">
				<picker-view v-if="visible" :indicator-style="indicatorStyle" :value="value" @change="bindChange" class="picker-view" style="height: 400rpx; width: 100%;">
					<picker-view-column style="text-align: center; line-height: 50px;">
						<view class="item" v-for="(item,index) in years" :key="index">{{item}}年</view>
					</picker-view-column>
					<picker-view-column style="text-align: center; line-height: 50px;">
						<view class="item" v-for="(item,index) in months" :key="index">{{item}}月</view>
					</picker-view-column>
					<picker-view-column style="text-align: center; line-height: 50px;">
						<view class="item" v-for="(item,index) in days" :key="index">{{item}}日</view>
					</picker-view-column>
				</picker-view>
			</view>
		</uni-popup>
		
		<uni-popup ref="ChangeNikePopup" background-color="#fff" border-radius="8px 8px 8px 8px">
			<view class="popup-content changeNike" style="height: 350rpx;">
				<view class="text-center font32">修改昵称</view>
				<input class="uni-input" maxlength="9" v-model="changeNike" focus/>
				<view class="desc">最多可输入9个字符，支持中英文、数字、表情符号</view>
				<view v-if="errorMessage" class="error-message text-center font28">{{ errorMessage }}</view>
				<view class="btn d-flex position-absolute">
					<view class="cancle text-center font28" style="width: 50%; line-height: 90rpx; border-right: 1px solid #ededed;" @click="ColseChangeNikePopup">取消</view>
					<view class="confirm text-center font28" style="width: 50%; line-height: 90rpx;" @click="confirmNike">确认</view>
				</view>
			</view>
		</uni-popup>
		
		<uni-popup ref="PersonalizedSignaturePopup" background-color="#fff" border-radius="8px 8px 8px 8px">
			<view class="popup-content changeNike PersonalizedSignature" style="height: 400rpx;">
				<view class="text-center font32">修改个性签名</view>
				<textarea maxlength="30" v-model="PersonalizedSignature" focus="true"></textarea>
				<view class="desc">最多可输入30个字符，支持中英文、数字、表情符号</view>
				<view class="btn d-flex position-absolute">
					<view class="cancle text-center font28" style="width: 50%; line-height: 90rpx; border-right: 1px solid #ededed;" @click="ColsePersonalizedSignaturePopup">取消</view>
					<view class="confirm text-center font28" style="width: 50%; line-height: 90rpx;" @click="confirmPersonalizedSignature">确认</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import TitleBarVue from '../../components/TitleBar.vue';
	import { uploadImageApi } from '../../http/uploadImage.js';
	import { userApi } from '../../http/userApi';
	import store from '@/store/index.js';
	import { mapActions } from 'vuex'
	export default {
		data() {
			const date = new Date()
			const years = []
			const year = date.getFullYear()
			const months = []
			const month = date.getMonth() + 1
			const days = []
			const day = date.getDate()
			
			for (let i = 1990; i <= date.getFullYear(); i++) {
			    years.push(i)
			}
			
			for (let i = 1; i <= 12; i++) {
			    months.push(i)
			}
			
			for (let i = 1; i <= 31; i++) {
			    days.push(i)
			}
			return {
				display: "none;",
				bgcolor: "#fff",
				current: 0,
				visible: true,
				value: [9999, month - 1, day - 1],
				changeNike: "",
				PersonalizedSignature: "",
				field: null,
				title: '个人资料',
				years,
				year,
				months,
				month,
				days,
				day,
				birthday: "",
				indicatorStyle: `height: 50px;`,
				imageList: [],
				errorMessage: ''
			}
		},
		components: {TitleBarVue},
		methods: {
			...mapActions('permissionToast', ['requstPermission']),
			goBack() {
				uni.navigateBack({
					delta: 1
				});
			},
			gotoChageAvatarPage() {
				uni.navigateTo({
					url: '/pagesApp/ChangeAvatar/ChangeAvatar'
				})
			},
			openDatePopup(type) {
				this.type = type
				this.$refs.DatePopup.open(type)
			},
			ColseDatePopup() {
				this.$refs.DatePopup.close()
			},
			validateNickname(nickname) {
			    const regex = /^[a-zA-Z0-9\u4e00-\u9fa5\p{Emoji}.]+$/u; // 支持英文、数字、中文和表情符号
			    if (nickname.length === 0) {
			        return '昵称不能为空';
			    } else if (nickname.length > 9) {
			        return '昵称不能超过9个字符';
			    }
			    return ''; // 返回空字符串表示没有错误
			},
			openChangeNikePopup(type) {
				this.type = type
				this.$refs.ChangeNikePopup.open(type)
			},
			ColseChangeNikePopup() {
				this.$refs.ChangeNikePopup.close()
			},
			openPersonalizedSignaturePopup(type) {
				this.type = type
				this.$refs.PersonalizedSignaturePopup.open(type)
			},
			ValidateSignature(val) {
				const regex = /^[a-zA-Z\u4e00-\u9fa5+\-*/()（）.~,，!！@——_ " " ":：。^%$#@=~;？?[]]+$/;
				if (!regex.test(val)) {
					return false
				} else {
					return true
				}
			},
			ColsePersonalizedSignaturePopup() {
				this.$refs.PersonalizedSignaturePopup.close()
			},
			confirmPersonalizedSignature() {
				let that = this;
				if(that.ValidateSignature(this.PersonalizedSignature)) {
					uni.showToast({
						icon: 'none',
						title: '请输入规范的标签名哟~',
						duration: 1500
					})
					return
				}
				that.editUserInfo('signature',this.PersonalizedSignature)
				setTimeout(function() {
					that.getUserInfo()
					uni.showToast({
						icon: 'none',
						title: '修改成功',
						position: 'bottom',
						duration: 1500
					})
				}, 500);
				that.$refs.PersonalizedSignaturePopup.close()
			},
			dateconfirm() {
				let that = this;
				that.birthday = that.year + "-" + that.month + "-" + that.day
				that.editUserInfo('birthday',that.birthday)
				setTimeout(function() {
					that.getUserInfo()
				}, 500);
				that.$refs.DatePopup.close()
			},
			confirmNike() {
			    const error = this.validateNickname(this.changeNike);
				console.log(error);
			    if (error) {
					uni.showToast({
						icon: 'none',
						title: '昵称仅支持中英文、数字、表情符号哦~',
						position: 'bottom',
						duration: 1500
					})
			        return
			    }
				let that = this;
				that.editUserInfo('nickname',that.changeNike)
				setTimeout(function() {
				  	that.getUserInfo()
				}, 500);
				that.$refs.ChangeNikePopup.close()
			    uni.showToast({
			     	icon: 'none',
			     	title: '修改成功',
			     	position: 'bottom',
			     	duration: 1500
			    })
			    this.ColseChangeNikePopup(); // 关闭弹窗
			},
			bindChange(e) {
				const val = e.detail.value
				this.year = this.years[val[0]]
				this.month = this.months[val[1]]
				this.day = this.days[val[2]]
			},
			async uploadImg(files) {
				let res = await uploadImageApi.Upload(files)
				let that = this;
				that.editUserInfo(this.field, res.data)
				setTimeout(function() {
					that.getUserInfo()
					uni.showToast({
						title:'修改成功！',
						icon: 'none',
						position: 'bottom',
						duration:1500
					})
				}, 500);
				this.field = null
			},
			async editUserInfo(key, val) {
				let Info = {
					[key]: val
				}
				let res = await userApi.editUserInfo(Info)
			},
			async getUserInfo() {
				let usr = await userApi.getUserInfo()
				store.commit('setLogin',usr)
			},
			chooseImage: async function(field) {
				this.field = field
				uni.chooseImage({
					count: 1,
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					success: (res) => {
						let images = []
						res.tempFilePaths.forEach((i) => {
							images.push(i)
						})
						for(let i=0; i<images.length; i++) {
							this.uploadImg(res.tempFilePaths[0])
						}
					},
					fail: (err) => {
						console.log("err: ",err);
					}
				})
			}
		},
		mounted() {
			this.changeNike = this.$store.state.user.nickname
			this.PersonalizedSignature = this.$store.state.user.signature
		}
	}
</script>

<style scoped lang="scss">
	.error-message {
	  color: red;
	  margin-top: 10rpx;
	}
.main {
	background: #f4f5fa;
	overflow: hidden;
	.content {
		width: 100%;
		overflow: hidden;
	}
	.list {
		width: 100%;
		background-color: #ffffff;
		.item {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 30rpx 0;
			border-bottom: 1px solid rgba(204, 204, 204, .2);
			text {
				margin-left: 30rpx;
				font-size: 28rpx;
				color: #555;
			}
			.icon {
				display: flex;
				flex: 1;
				align-items: center;
				justify-content: flex-end;
				image {
					margin: 0 30rpx 0rpx 12rpx;
					width: 10rpx;
					height: 20rpx;
					transform: rotate(180deg);
				}
				text {
					font-size: 26rpx;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 1;
					overflow: hidden;
				}
				.avatar {
					margin-right: 0;
					transform: rotate(0deg);
				}
			}
		}
	}
	.clearCache {
		.item {
			border: 0;
		}
	}
}
.title {
	display: flex;
	align-items: center;
	height: 80rpx;
	padding-right: 47rpx;
	text {
		flex: 1;
		margin-right: 50rpx;
		font-size: 32rpx;
		text-align: center;
	}
}

.changeNike {
	padding: 40rpx 60rpx 0;
	color: #1f1f1f;
	input {
		box-sizing: border-box;
		border-radius: 10rpx;
		color: #333333;
		font-size: 26rpx;
		width: 100%;
		margin-top: 50rpx;
		height: 70rpx;
		padding-left: 20rpx;
		background-color: #efefef;
	}
	.desc {
		margin-top: 25rpx;
		font-size: 22rpx;
		color: #888888;
	}
	.btn {
		bottom: 0;
		left: 0;
		width: 100%;
		height: 90rpx;
		border-top: 1px solid #ededed;
	}
	.cancle {
		color: #9E9D9D;
	}
	.confirm {
		color: #66CCCC;
	}
}
.PersonalizedSignature {
	textarea {
		box-sizing: border-box;
		border-radius: 10rpx;
		color: #333333;
		font-size: 26rpx;
		width: 100%;
		margin-top: 50rpx;
		height: 150rpx;
		padding: 20rpx 0 0 20rpx;
		background-color: #efefef;
	}
}
.pt-300 {
	padding-top: 300rpx;
}
.list-mt-100 {
	margin: 170rpx 0rpx 20rpx !important;
}
</style>
